<!--
*******************************************************************************
 * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

<div class="card border-0">
    <div class="card-header">
        <i class="fa fa-list text-danger mr-2"></i>
        <span> <span class="text-info">{{deviceName}}</span> Associated Commands List</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive ">
            <table class="table table-hover text-truncate ">
                <thead class="thead-light">
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">Name</th>
                      <th scope="col">Method</th>
                      <th scope="col">URL</th>
                      <th scope="col">Path</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let cmd of deviceAssociatedCoreCommandsList;let i=index;" [class.table-active]="isChecked(cmd.name)">
                        <td><input type="checkbox" role="button"  [checked]="isChecked(cmd.name)" (click)="selectOne($event,cmd)"></td>
                        <td class="user-select-all">{{cmd.name}}</td>
                        <td>
                            <div>
                                <div *ngIf="cmd.get" class="form-check form-check-inline">
                                    <span class="badge">
                                        <input class="form-check-input align-middle" type="radio" id="get-{{cmd}}-{{i}}" name="cmdMethod"  *ngIf="isChecked(cmd.name)" value="GET" [(ngModel)]="httpMethod" (click)="methodChecked($event,'GET')">
                                        <label class="form-check-label align-middle" for="get-{{cmd}}-{{i}}">get</label>
                                    </span>
                                </div>
                                <div *ngIf="cmd.set" class="form-check form-check-inline">
                                    <span class="badge">
                                        <input class="form-check-input align-middle" type="radio" id="set-{{cmd}}-{{i}}" name="cmdMethod"  *ngIf="isChecked(cmd.name)" value="PUT" [(ngModel)]="httpMethod" (click)="methodChecked($event,'PUT')">
                                        <label class="form-check-label align-middle" for="set-{{cmd}}-{{i}}">set</label>
                                    </span>
                                </div>
                            </div>
                            
                        </td>
                        <td>{{cmd.url}}</td>
                        <td>{{cmd.path}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>